<%@ include file="../common/Top.jsp" %>

<!-- breadcrumb-section start -->
<nav class="breadcrumb-section theme1 breadcrumb-bg1">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-title text-center my-20">
                    <h2 class="title text-dark text-capitalize">Hair Care</h2>
                </div>
            </div>
            <div class="col-12">
                <ol class="breadcrumb bg-transparent m-0 p-0 align-items-center justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Hair Care</li>
                </ol>
            </div>
        </div>
    </div>
</nav>
<!-- breadcrumb-section end -->
<!-- product tab start -->
<div class="product-tab pb-40">
    <div class="container grid-wraper">
        <div class="row">
            <div class="col-lg-9 mb-30">
                <div class="grid-nav-wraper mb-30">
                    <div class="row align-items-center">
                        <div class="col-12 col-md-6 mb-3 mb-md-0">
                            <nav class="shop-grid-nav">
                                <ul class="nav nav-pills align-items-center" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                           href="#pills-home" role="tab" aria-controls="pills-home"
                                           aria-selected="true">
                                            <i class="fa fa-th"></i>

                                        </a>
                                    </li>
                                    <li class="nav-item mr-0">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
                                           href="#pills-profile" role="tab" aria-controls="pills-profile"
                                           aria-selected="false"><i
                                                class="fa fa-list"></i></a>
                                    </li>
                                    <li><span class="total-products text-capitalize">There are 13 products.</span></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col-12 col-md-6 position-relative">
                            <div class="shop-grid-button d-flex align-items-center">
                                <span class="sort-by">Sort by:</span>
                                <button class="btn-dropdown d-flex justify-content-between" type="button"
                                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                    Relevance <span class="ion-android-arrow-dropdown"></span>
                                </button>
                                <div class="dropdown-menu shop-grid-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Relevance</a>
                                    <a class="dropdown-item" href="#"> Name, A to Z</a>
                                    <a class="dropdown-item" href="#"> Name, Z to A</a>
                                    <a class="dropdown-item" href="#"> Price, low to high</a>
                                    <a class="dropdown-item" href="#"> Price, high to low</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- product-tab-nav end -->
                <div class="tab-content" id="pills-tabContent">
                    <!-- first tab-pane -->
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                         aria-labelledby="pills-home-tab">

                        <%--这里新增了一个id属性，这是为了方便js操作这部分dom代码--%>
                        <div class="row grid-view theme1" id="itemListArea">

                            <%--------------------------------------------------------------------------%>
                            <c:forEach var="item" items="${sessionScope.itemList}">
                                <div class="col-sm-6 col-md-4 mb-30">
                                    <div class="card product-card">
                                        <div class="card-body p-0">
                                            <div class="product-thumbnail position-relative">
                                                <span class="badge badge-danger top-left">New</span>
                                                <a href="viewItem?itemId=${item.itemId}">
                                                    <img class="first-img" src="${item.attribute2}"
                                                         alt="thumbnail">
                                                </a>
                                                <!-- product links -->
                                                <div class="product-links d-flex d-flex justify-content-between">
                                                    <button class="pro-btn" data-toggle="modal"
                                                            data-target="#add-to-cart"
                                                            tabindex="0">Add
                                                        to cart
                                                    </button>
                                                    <ul class="d-flex justify-content-center">
                                                        <li>
                                                            <a href="#" data-toggle="modal" data-target="#quick-view"
                                                               tabindex="0">
                                                            <span data-toggle="tooltip" data-placement="bottom" title=""
                                                                  class="ion-ios-search-strong"
                                                                  data-original-title="Quick view"></span>
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" data-toggle="modal" data-target="#compare"
                                                               tabindex="0">
                                                            <span data-toggle="tooltip" data-placement="bottom" title=""
                                                                  class="ion-ios-shuffle-strong"
                                                                  data-original-title="Add to compare"></span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html" tabindex="0">
                                                            <span data-toggle="tooltip" data-placement="bottom" title=""
                                                                  class="ion-android-favorite-outline"
                                                                  data-original-title="add to wishlist"> </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <!-- product links end-->
                                                </div>
                                                <!-- product links end-->
                                            </div>
                                            <div class="product-desc">
                                                <h3 class="title"><a href="shop-grid-4-column.html">
                                                    <a href="viewItem?itemId=${item.itemId}">${item.itemId}</a>
                                                </a></h3>
                                                <div class="star-rating my-10">
                                                    <span class="ion-ios-star"></span>
                                                    <span class="ion-ios-star"></span>
                                                    <span class="ion-ios-star"></span>
                                                    <span class="ion-ios-star"></span>
                                                    <span class="ion-ios-star de-selected"></span>
                                                </div>
                                                <h6 class="product-price">$ ${item.listPrice}</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- product-list End -->
                                </div>
                            </c:forEach>
                            <%--          ----------------------------------------                  --%>


                <%--特别注意：下面两个</div>不能删去--%>
                        </div>
                    </div>
                    <!-- second tab-pane -->
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <div class="row grid-view-list theme1">

                            <c:forEach var="item" items="${sessionScope.itemList}">
                            <div class="col-12 mb-30">
                                <div class="card product-card">
                                    <div class="card-body p-0">
                                        <div class="media flex-column flex-sm-row">
                                            <div class="product-thumbnail position-relative">
                                                <span class="badge badge-danger top-left">New</span>
                                                <a href="single-product.html">
                                                    <img class="first-img" src="${item.attribute2}"
                                                         alt="thumbnail">
                                                </a>
                                                <!-- product links -->
                                                <div class="product-links d-flex d-flex justify-content-between">
                                                    <button class="pro-btn" data-toggle="modal"
                                                            data-target="#add-to-cart" tabindex="0">Add
                                                        to cart
                                                    </button>
                                                    <ul class="d-flex justify-content-center">
                                                        <li>
                                                            <a href="#" data-toggle="modal" data-target="#quick-view"
                                                               tabindex="0">
                                                                <span data-toggle="tooltip" data-placement="bottom"
                                                                      title="" class="ion-ios-search-strong"
                                                                      data-original-title="Quick view"></span>
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" data-toggle="modal" data-target="#compare"
                                                               tabindex="0">
                                                                <span data-toggle="tooltip" data-placement="bottom"
                                                                      title="" class="ion-ios-shuffle-strong"
                                                                      data-original-title="Add to compare"></span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html" tabindex="0">
                                                                <span data-toggle="tooltip" data-placement="bottom"
                                                                      title="" class="ion-android-favorite-outline"
                                                                      data-original-title="add to wishlist"> </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <!-- product links end-->
                                                </div>
                                                <!-- product links end-->
                                            </div>
                                            <div class="media-body pl-sm-4 mt-30 mt-sm-0">
                                                <div class="product-desc">
                                                    <h3 class="title"><a href="viewItem?itemId=${item.itemId}">${item.itemId}</a></h3>
                                                    <div class="star-rating mb-10 mt-10">
                                                        <span class="ion-ios-star"></span>
                                                        <span class="ion-ios-star"></span>
                                                        <span class="ion-ios-star"></span>
                                                        <span class="ion-ios-star"></span>
                                                        <span class="ion-ios-star de-selected"></span>
                                                    </div>
                                                    <h6 class="product-price">$ ${item.listPrice}</h6>
                                                </div>
                                                <div class="availability-list pb-30 mt-20 border-bottom">
                                                    <p>Availability: <span>1200 In Stock</span></p>
                                                </div>
                                                <ul class="product-list-des">
                                                    <li>
                                                        Block out the haters with the fresh adidas® Originals Kaval
                                                        Windbreaker Jacket.
                                                    </li>
                                                    <li>
                                                        Part of the Kaval Collection.
                                                    </li>
                                                    <li>
                                                        Regular fit is eased, but not sloppy, and perfect for any
                                                        activity.
                                                    </li>
                                                    <li>
                                                        Plain-woven jacket specifically constructed for freedom of
                                                        movement.
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- product-list End -->
                            </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <nav class="pagination-section mt-30">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="#"><i class="ion-chevron-right"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 mb-30 order-lg-first">
                <aside class="left-sidebar theme1">
                    <!-- search-filter start -->
                    <div class="search-filter">
                        <div class="check-box-inner pt-0">
                            <h4 class="title">Category</h4>
                        </div>

                    </div>

                    <ul id="offcanvas-menu2" class="blog-ctry-menu">
                        <c:forEach var="category" items="${sessionScope.categoryList}">
                            <li id="${category.categoryId}" onclick="updateItemsByCategory(this.id);">
                                <a href="javascript:void(0)">${category.name}</a>
                                <ul class="category-sub-menu">
                                    <c:forEach var="product" items="${sessionScope.productList}">
                                        <c:if test="${product.categoryId == category.categoryId}">
                                            <li id="${product.productId}" onclick="updateItemsByProduct(this.id);">
                                                <a href="javascript:void(0)">${product.name}</a></li>
                                        </c:if>
                                    </c:forEach>
                                </ul>
                            </li>
                        </c:forEach>

                        <%--  用于示例 --%>
                        <%--                        <li><a href="javascript:void(0)">Reptiles</a>--%>
                        <%--                            <ul class="category-sub-menu">--%>
                        <%--                                <li><a href="#">Stylish Backpacks</a></li>--%>
                        <%--                                <li><a href="#">Shoulder Bags</a></li>--%>
                        <%--                                <li><a href="#">Crossbody Bags</a></li>--%>
                        <%--                                <li><a href="#">Briefcases</a></li>--%>
                        <%--                                <li><a href="#">Luggage &amp; Travel</a></li>--%>
                        <%--                            </ul>--%>
                        <%--                        </li>--%>
                    </ul>

                    <div class="search-filter border-top mt-45 pt-45">
                        <form action="#">
                            <div class="check-box-inner pt-0">
                                <h4 class="title">Filter By</h4>
                                <h4 class="sub-title pt-10">Categories</h4>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20820">
                                    <label for="20820">Hot Categories<span>(13)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20821">
                                    <label for="20821">Outerwear & Jackets<span>(13)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20822">
                                    <label for="20822">Weddings & Events<span>(13)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20823">
                                    <label for="20822">Bottoms<span>(13)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="208210">
                                    <label for="20822">Tops & Sets<span>(13)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="208211">
                                    <label for="20822">Accessories<span>(13)</span></label>
                                </div>
                            </div>
                            <!-- check-box-inner -->
                            <div class="check-box-inner mt-10">
                                <h4 class="sub-title">Price</h4>
                                <div class="price-filter mt-10">
                                    <div class="price-slider-amount">
                                        <input type="text" id="amount" name="price" readonly
                                               placeholder="Add Your Price"/>
                                    </div>
                                    <div id="slider-range"></div>
                                </div>
                            </div>
                            <div class="check-box-inner mt-10">
                                <h4 class="sub-title">Size</h4>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="test9">
                                    <label for="test9">s <span>(2)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="test10">
                                    <label for="test10">m <span>(2)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="test11">
                                    <label for="test11">l <span>(2)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="test12">
                                    <label for="test12">xl <span>(2)</span></label>
                                </div>
                            </div>
                            <!-- check-box-inner -->
                            <div class="check-box-inner mt-10">
                                <h4 class="sub-title">color</h4>
                                <div class="filter-check-box color-grey">
                                    <input type="checkbox" id="20826">
                                    <label for="20826">grey <span>(4)</span></label>
                                </div>
                                <div class="filter-check-box color-white">
                                    <input type="checkbox" id="20827">
                                    <label for="20827">white <span>(3)</span></label>
                                </div>
                                <div class="filter-check-box color-black">
                                    <input type="checkbox" id="20828">
                                    <label for="20828">black <span>(6)</span></label>
                                </div>
                                <div class="filter-check-box color-camel">
                                    <input type="checkbox" id="20829">
                                    <label for="20829">camel <span>(2)</span></label>
                                </div>
                            </div>
                            <!-- check-box-inner -->
                            <div class="check-box-inner mt-10">
                                <h4 class="sub-title">Brand</h4>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20824">
                                    <label for="20824">Graphic Corner<span>(5)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20825">
                                    <label for="20825">Studio Design<span>(8)</span></label>
                                </div>
                            </div>

                            <!-- check-box-inner -->
                            <div class="check-box-inner mt-10">
                                <h4 class="sub-title">Dimension</h4>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20830">
                                    <label for="20830"> 40x60cm<span>(3)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20831">
                                    <label for="20831">60x90cm<span>(3)</span></label>
                                </div>
                                <div class="filter-check-box">
                                    <input type="checkbox" id="20832">
                                    <label for="20832"> 80x120cm<span>(8)</span></label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- search-filter end -->
                    <div class="product-widget border-top mt-45 pt-45 mb-60">
                        <h3 class="title text-uppercase">tags :</h3>
                        <ul class="product-tag d-flex flex-wrap">
                            <li><a href="#">Women’s</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Men’s</a></li>
                            <li><a href="#">Tops & Sets</a></li>
                        </ul>
                    </div>
                    <!--second banner start-->
                    <div class="banner img-width-100 border-top mt-45 pt-45 hover-animation position-relative overflow-hidden">
                        <a href="shop-grid-4-column.html" class="d-block">
                            <img src="assets/img/banner/8.jpg" alt="img">
                        </a>
                    </div>
                    <!--second banner end-->
                </aside>
            </div>
        </div>
    </div>
</div>
<!-- product tab end -->

<%--引入底部--%>
<%@include file="../common/Bottom.jsp" %>

<!-- modals start -->

<!-- first modal -->
<div class="modal fade theme1 style1" id="quick-view" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 col-lg-6 mb-5 mb-lg-0">
                        <div class="product-sync-init mb-20">
                            <div class="single-product">
                                <div class="product-thumb">
                                    <img src="assets/img/slider/thumb/1.jpg" alt="product-thumb">
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <img src="assets/img/slider/thumb/2.jpg" alt="product-thumb">
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <img src="assets/img/slider/thumb/3.jpg" alt="product-thumb">
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <img src="assets/img/slider/thumb/4.jpg" alt="product-thumb">
                                </div>
                            </div>
                            <!-- single-product end -->
                        </div>

                        <div class="product-sync-nav slick-nav-sync">
                            <div class="single-product">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)"> <img src="assets/img/slider/thumb/1.1.jpg"
                                                                       alt="product-thumb"></a>
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)"> <img src="assets/img/slider/thumb/2.1.jpg"
                                                                       alt="product-thumb"></a>
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)"><img src="assets/img/slider/thumb/3.1.jpg"
                                                                      alt="product-thumb"></a>
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)"><img src="assets/img/slider/thumb/4.1.jpg"
                                                                      alt="product-thumb"></a>
                                </div>
                            </div>
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)"><img src="assets/img/slider/thumb/2.1.jpg"
                                                                      alt="product-thumb"></a>
                                </div>
                            </div>
                            <!-- single-product end -->
                        </div>
                    </div>
                    <div class="col-md-6 mt-5 mt-md-0">
                        <div class="modal-product-info">
                            <div class="product-head">
                                <h2 class="title">Brixton Patrol All Terrain Anorak Jacket</h2>
                                <h4 class="sub-title">Reference: demo_5</h4>
                                <div class="star-content mb-20">
                                    <span class="star-on"><i class="ion-ios-star"></i> </span>
                                    <span class="star-on"><i class="ion-ios-star"></i> </span>
                                    <span class="star-on"><i class="ion-ios-star"></i> </span>
                                    <span class="star-on"><i class="ion-ios-star"></i> </span>
                                    <span class="star-on de-selected"><i class="ion-ios-star"></i> </span>
                                </div>
                            </div>
                            <div class="product-body">
                                    <span class="product-price text-center"> <span class="new-price">$29.00</span>
                                    </span>
                                <p class="border-top pt-30">Whether you're exploring the woods or the city, the Brixton™
                                    Patrol All </p>
                                <ul>
                                    <li>Terrain Anorak Jacket has got you covered.</li>
                                    <li>Camo jacket crafted from 4.5 oz nylon ripstop with two-way stretch, and a
                                        water-repellent coating.
                                    </li>
                                    <li>Drawstring hood.</li>
                                </ul>
                            </div>
                            <div class="product-size d-flex align-items-center mt-30">
                                <h3 class="title">Dimension</h3>
                                <select>
                                    <option value="0">S</option>
                                    <option value="1">M</option>
                                    <option value="2">L</option>
                                    <option value="3">XL</option>

                                </select>
                            </div>
                            <div class="product-footer">
                                <div class="product-count style d-flex flex-column flex-sm-row my-4">
                                    <div class="count d-flex">
                                        <input type="number" min="1" max="10" step="1" value="1">
                                        <div class="button-group">
                                            <button class="count-btn increment"><i
                                                    class="fas fa-chevron-up"></i></button>
                                            <button class="count-btn decrement"><i
                                                    class="fas fa-chevron-down"></i></button>
                                        </div>
                                    </div>
                                    <div>
                                        <button class="btn theme-btn--dark3 btn--xl mt-30 mt-sm-0">
                                            <span class="mr-2"><i class="ion-bag"></i></span>
                                            Add to cart
                                        </button>
                                    </div>
                                </div>
                                <div class="addto-whish-list">
                                    <a href="#"><i class="icon-heart"></i> Add to wishlist</a>
                                    <a href="#"><i class="icon-shuffle"></i> Add to compare</a>
                                </div>
                                <div class="pro-social-links mt-10">
                                    <ul class="d-flex align-items-center">
                                        <li class="share">Share</li>
                                        <li><a href="#"><i class="ion-social-facebook"></i></a></li>
                                        <li><a href="#"><i class="ion-social-twitter"></i></a></li>
                                        <li><a href="#"><i class="ion-social-google"></i></a></li>
                                        <li><a href="#"><i class="ion-social-pinterest"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- second modal -->
<div class="modal fade style2" id="compare" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="title"><i class="fa fa-check"></i> Product added to compare.</h5>
            </div>
        </div>
    </div>
</div>
<!-- second modal -->
<div class="modal fade style3" id="add-to-cart" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header justify-content-center bg-dark">
                <h5 class="modal-title" id="add-to-cartCenterTitle"><span class="ion-checkmark-round"></span> Product
                    successfully added to your shopping cart</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-5 divide-right">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="assets/img/modal/1.jpg" alt="img">
                            </div>
                            <div class="col-md-6 mb-2 mb-md-0">
                                <h4 class="product-name">New Balance Running Arishi trainers in triple</h4>
                                <h5 class="price">$$29.00</h5>
                                <h6 class="color"><strong>Dimension: </strong>: <span class="dmc">40x60cm</span></h6>
                                <h6 class="quantity"><strong>Quantity:</strong>&nbsp;1</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="modal-cart-content">
                            <p class="cart-products-count">There is 1 item in your cart.</p>
                            <p><strong>Total products:</strong>&nbsp;$123.72</p>
                            <p><strong>Total shipping:</strong>&nbsp;$7.00 </p>
                            <p><strong>Taxes</strong>&nbsp;$0.00</p>
                            <p><strong>Total:</strong>&nbsp;$130.72 (tax excl.)</p>
                            <div class="cart-content-btn">
                                <button type="button" class="btn theme-btn--dark1 btn--md mt-4" data-dismiss="modal">
                                    Continue
                                    shopping
                                </button>
                                <button class="btn theme-btn--dark1 btn--md mt-4"><i
                                        class="ion-checkmark-round"></i>Proceed to
                                    checkout
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/vendor/vendor.min.js"></script>
<script src="assets/js/plugins/plugins.min.js"></script>
<script src="assets/js/main.js"></script>

<script>
    <%-- 点击Product更新具体商品 --%>
<%--    有两种方式实现更新，一种是通过ajax异步请求，请求servlet将查询得到的itemList重新放回session中，然后重新渲染页面--%>
<%--    另一种方式则是ajax异步请求，将结果通过json方式返回，再操作dom树，将结果输入到页面中 --%>
<%--    这里采用的是后一种方法，不知什么原因，在servlet中session的值和js中获得的session中的值不一样，暂未解决--%>
    function updateItemsByProduct(click_id) {
        // console.log(click_id)
        $.ajax({
            type: "GET",
            url: "updateItemsByProduct?productId=" + click_id,
            success: function (data) {
                //修改Product的active（被选中）属性
                    //清除上一次被选中标签的active
                var lastClickId = "#" + this.lastClickId;
                $(lastClickId).attr("class", "");
                    //重置当前的上一次被选中标签id
                this.lastClickId = click_id;
                    //更新当前被选中标签
                var curClickId = "#" + click_id;
                $(curClickId).attr("class", "active");

                // console.log(data)
                // console.log(data.itemList[0].itemId)

                //刷新item列表
                var str = "";
                for (var i = 0; i < data.itemList.length; i++) {
                    var sub = "<div class=\"col-sm-6 col-md-4 mb-30\">\n" +
                        "                                    <div class=\"card product-card\">\n" +
                        "                                        <div class=\"card-body p-0\">\n" +
                        "                                            <div class=\"product-thumbnail position-relative\">\n" +
                        "                                                <span class=\"badge badge-danger top-left\">New</span>\n" +
                        "                                                <a href=\"viewItem?itemId=" + data.itemList[i].itemId + "\">\n" +
                        "                                                    <img class=\"first-img\" src=\"" + data.itemList[i].attribute2 + "\"\n" +
                        "                                                         alt=\"thumbnail\">\n" +
                        "                                                </a>\n" +
                        "                                                <!-- product links -->\n" +
                        "                                                <div class=\"product-links d-flex d-flex justify-content-between\">\n" +
                        "                                                    <button class=\"pro-btn\" data-toggle=\"modal\"\n" +
                        "                                                            data-target=\"#add-to-cart\"\n" +
                        "                                                            tabindex=\"0\">Add\n" +
                        "                                                        to cart\n" +
                        "                                                    </button>\n" +
                        "                                                    <ul class=\"d-flex justify-content-center\">\n" +
                        "                                                        <li>\n" +
                        "                                                            <a href=\"#\" data-toggle=\"modal\" data-target=\"#quick-view\"\n" +
                        "                                                               tabindex=\"0\">\n" +
                        "                                                            <span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\"\n" +
                        "                                                                  class=\"ion-ios-search-strong\"\n" +
                        "                                                                  data-original-title=\"Quick view\"></span>\n" +
                        "                                                            </a>\n" +
                        "                                                        </li>\n" +
                        "\n" +
                        "                                                        <li>\n" +
                        "                                                            <a href=\"#\" data-toggle=\"modal\" data-target=\"#compare\"\n" +
                        "                                                               tabindex=\"0\">\n" +
                        "                                                            <span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\"\n" +
                        "                                                                  class=\"ion-ios-shuffle-strong\"\n" +
                        "                                                                  data-original-title=\"Add to compare\"></span>\n" +
                        "                                                            </a>\n" +
                        "                                                        </li>\n" +
                        "                                                        <li>\n" +
                        "                                                            <a href=\"wishlist.html\" tabindex=\"0\">\n" +
                        "                                                            <span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\"\n" +
                        "                                                                  class=\"ion-android-favorite-outline\"\n" +
                        "                                                                  data-original-title=\"add to wishlist\"> </span>\n" +
                        "                                                            </a>\n" +
                        "                                                        </li>\n" +
                        "                                                    </ul>\n" +
                        "                                                    <!-- product links end-->\n" +
                        "                                                </div>\n" +
                        "                                                <!-- product links end-->\n" +
                        "                                            </div>\n" +
                        "                                            <div class=\"product-desc\">\n" +
                        "                                                <h3 class=\"title\"><a href=\"shop-grid-4-column.html\">\n" +
                        "<a href=\"viewItem?itemId=" + data.itemList[i].itemId + "\">" + data.itemList[i].itemId + "</a>" +
                        "                                                </a></h3>\n" +
                        "                                                <div class=\"star-rating my-10\">\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star de-selected\"></span>\n" +
                        "                                                </div>\n" +
                        "                                                <h6 class=\"product-price\">$ " + data.itemList[i].listPrice + "</h6>\n" +
                        "                                            </div>\n" +
                        "                                        </div>\n" +
                        "                                    </div>\n" +
                        "                                    <!-- product-list End -->\n" +
                        "                                </div>";

                    str += sub;
                    $('#itemListArea').html(str);
                }

            }
        });
    }

    function updateItemsByCategory(click_id) {
        $.ajax({
            type: "GET",
            url: "updateItemsByCategory?categoryId=" + click_id,
            success: function (data) {
                // console.log(click_id)
                var str = "";
                for (var i = 0; i < data.itemList.length; i++) {
                    var sub = "<div class=\"col-sm-6 col-md-4 mb-30\">\n" +
                        "                                    <div class=\"card product-card\">\n" +
                        "                                        <div class=\"card-body p-0\">\n" +
                        "                                            <div class=\"product-thumbnail position-relative\">\n" +
                        "                                                <span class=\"badge badge-danger top-left\">New</span>\n" +
                        "                                                <a href=\"viewItem?itemId=" + data.itemList[i].itemId + "\">\n" +
                        "                                                    <img class=\"first-img\" src=\"" + data.itemList[i].attribute2 + "\"\n" +
                        "                                                         alt=\"thumbnail\">\n" +
                        "                                                </a>\n" +
                        "                                                <!-- product links -->\n" +
                        "                                                <div class=\"product-links d-flex d-flex justify-content-between\">\n" +
                        "                                                    <button class=\"pro-btn\" data-toggle=\"modal\"\n" +
                        "                                                            data-target=\"#add-to-cart\"\n" +
                        "                                                            tabindex=\"0\">Add\n" +
                        "                                                        to cart\n" +
                        "                                                    </button>\n" +
                        "                                                    <ul class=\"d-flex justify-content-center\">\n" +
                        "                                                        <li>\n" +
                        "                                                            <a href=\"#\" data-toggle=\"modal\" data-target=\"#quick-view\"\n" +
                        "                                                               tabindex=\"0\">\n" +
                        "                                                            <span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\"\n" +
                        "                                                                  class=\"ion-ios-search-strong\"\n" +
                        "                                                                  data-original-title=\"Quick view\"></span>\n" +
                        "                                                            </a>\n" +
                        "                                                        </li>\n" +
                        "\n" +
                        "                                                        <li>\n" +
                        "                                                            <a href=\"#\" data-toggle=\"modal\" data-target=\"#compare\"\n" +
                        "                                                               tabindex=\"0\">\n" +
                        "                                                            <span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\"\n" +
                        "                                                                  class=\"ion-ios-shuffle-strong\"\n" +
                        "                                                                  data-original-title=\"Add to compare\"></span>\n" +
                        "                                                            </a>\n" +
                        "                                                        </li>\n" +
                        "                                                        <li>\n" +
                        "                                                            <a href=\"wishlist.html\" tabindex=\"0\">\n" +
                        "                                                            <span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\"\n" +
                        "                                                                  class=\"ion-android-favorite-outline\"\n" +
                        "                                                                  data-original-title=\"add to wishlist\"> </span>\n" +
                        "                                                            </a>\n" +
                        "                                                        </li>\n" +
                        "                                                    </ul>\n" +
                        "                                                    <!-- product links end-->\n" +
                        "                                                </div>\n" +
                        "                                                <!-- product links end-->\n" +
                        "                                            </div>\n" +
                        "                                            <div class=\"product-desc\">\n" +
                        "                                                <h3 class=\"title\"><a href=\"shop-grid-4-column.html\">\n" +
                        "<a href=\"viewItem?itemId=" + data.itemList[i].itemId + "\">" + data.itemList[i].itemId + "</a>" +
                        "                                                </a></h3>\n" +
                        "                                                <div class=\"star-rating my-10\">\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star\"></span>\n" +
                        "                                                    <span class=\"ion-ios-star de-selected\"></span>\n" +
                        "                                                </div>\n" +
                        "                                                <h6 class=\"product-price\">$ " + data.itemList[i].listPrice + "</h6>\n" +
                        "                                            </div>\n" +
                        "                                        </div>\n" +
                        "                                    </div>\n" +
                        "                                    <!-- product-list End -->\n" +
                        "                                </div>";

                    str += sub;
                    $('#itemListArea').html(str);
                }
            }
        })
    }

</script>

<script>
    $(function () {
        //声明一个全局变量，用于存储上一次点击的标签的id值
        this.lastClickId = "";

        <%--var shopVisitorFrom = "${sessionScope.shopVisitorFrom}";--%>
        <%--console.log(shopVisitorFrom)--%>
        <%--if (shopVisitorFrom == "SearchProducts") {--%>
        <%--    console.log("come from search");--%>
        <%--    var categoryId = "${sessionScope.category.categoryId}";--%>
        <%--    var productId = "${sessionScope.product.productId}";--%>

        <%--    $("#" + categoryId).attr("class", "active");--%>
        <%--    $("#" + productId).attr("class", "active");--%>
        <%--}--%>


    })
</script>

</body>

</html>
